<template>
  <el-card shadow="hover">
    <el-table
      lazy
      border
      :load="load"
      :row-key="setRowKey"
      :data="tableData"
      style="width: 1090px"
      :row-class-name="tableRowClassName"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="分类ID" width="150px" align="center" />
      <el-table-column prop="name" label="分类名称" width="690px" />
      <el-table-column width="250px" align="center">
        <template #header>
          <el-input
            placeholder="按Enter键添加一级分类"
            v-model="category1Value"
            @keyup.enter="addCategory1"
          />
        </template>
        <template v-slot="{ row }">
          <el-button
            type="primary"
            size="small"
            :disabled="row.level === 3"
            :icon="Plus"
            @click="add2Or3Category(row)"
          ></el-button>
          <el-button type="primary" size="small" :icon="Edit"></el-button>
          <el-button type="danger" size="small" :icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="centerDialogVisible">
      <el-form title="添加分类">
        <el-form-item label="分类名称">
          <el-input placeholder="请输入分类名称" v-model="collectValue" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XCategory",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Plus, Delete, Edit } from "@element-plus/icons-vue";
import type {
  CategoryList,
  CategoryItem,
} from "@/api/product/model/categoryModel";
import {
  getCategory1List,
  getCategory2List,
  getCategory3List,
  addCategory1Api,
} from "@/api/product/category";
import { ElMessage } from "element-plus";
// 表格数据
const tableData = ref<CategoryList>([]);
const category1Value = ref("");
const centerDialogVisible = ref(false);
const collectValue = ref();
// 封装的公共请求的函数
const showCategory1List = async () => {
  const C1 = await getCategory1List();
  // (item.hasChildren = true)
  tableData.value = C1.map((item) => {
    return {
      ...item,
      hasChildren: true,
      level: 1,
    };
  });
};
// 挂载时加载一级分类
onMounted(showCategory1List);
// 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息
const load = async (
  row: CategoryItem,
  treeNode: unknown,
  resolve: (date: CategoryItem[]) => void
) => {
  if (row.level === 1) {
    const C2 = await getCategory2List(row.id);
    resolve(
      C2.map((item) => {
        return {
          ...item,
          hasChildren: true,
          level: 2,
        };
      })
    );
  } else if (row.level === 2) {
    const C3 = await getCategory3List(row.id);
    resolve(
      C3.map((item) => {
        return {
          ...item,
          level: 3,
        };
      })
    );
  }
};
// 添加一级分类
const addCategory1 = async () => {
  if (!category1Value.value) return;
  await addCategory1Api(category1Value.value);
  ElMessage.success("一级分类添加成功");
  showCategory1List();
  category1Value.value = "";
};
// 添加二级/三级分类
const add2Or3Category = (row: CategoryItem) => {
  centerDialogVisible.value = true;
  collectValue.value = row;
};
// 设置id
const setRowKey = (row: CategoryItem) => {
  return row.level + "-" + row.id;
};
// 为二级分类添加类名
const tableRowClassName = ({ row }: { row: CategoryItem }) => {
  if (row.level === 2) {
    return "success-row";
  }
};
</script>

<style scoped></style>

<style>
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
